<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center" style="margin-top:0px">
      <div class="col-main">
        <div class="main-wrap">

          <div class="user-bill">
            <!--标题 -->
            <div class="am-cf am-padding">
              <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账单</strong> / <small>Electronic&nbsp;bill</small></div>
            </div>
            <hr />

            <div class="ebill-section">
              <div class="mb-10">
                <span>选择起止日期：</span>
                <el-date-picker v-model="startTime" type="date" placeholder="选择开始时间" :change="qryBill()">
                </el-date-picker>
                -
                <el-date-picker v-model="endTime" type="date" placeholder="选择结束时间" :change="qryBill()">
                </el-date-picker>
              </div>
              <div class="ebill-title-section">
                <h2 class="trade-title section-title">
                  交易
                  <span class="desc">（金额单位：元）</span>
                </h2>
              </div>

              <div class="module-income ng-scope">
                <div class="income-slider ">
                  <div class="block-income block  fn-left" style="width:100%">
                    <h3 class="income-title block-title">
                      支出
                      <span class="num ng-binding">
                        {{outPrice}}
                      </span>
                      <span class="desc ng-binding">
                        <router-link :to="{name:'bills',query:{type:0}}">查看支出明细</router-link>
                      </span>
                    </h3>
                  </div>
                  <div class="block-income block  fn-left" style="width:100%">
                    <h3 class="income-title block-title">
                      收入
                      <span class="num ng-binding">
                        {{inPrice}}
                      </span>
                      <span class="desc ng-binding">
                        <router-link :to="{name:'bills',query:{type:1}}">查看收入明细</router-link>
                      </span>
                    </h3>
                  </div>
                </div>

                <!--消费走势-->
                <div class="module-consumeTrend inner-module" style="width:100%;height:auto">
                  <h3 class="module-title">消费走势</h3>
                  <div id="myChart" style="width:100%;height:300px">

                  </div>
                </div>

                <!--银行卡使用情况-->

              </div>

            </div>

          </div>
        </div>
        <!--底部-->
        <foot></foot>

      </div>

      <leftmenu></leftmenu>
    </div>

    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
var date = new Date();
    date.setDate(1);
export default {
  name: 'bill',
  data () {
    return {
      startTime: date,
      endTime: new Date(),
      inPrice: 0,
      outPrice: 0,
      xdata: [],
      ydata: []
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryBill();
    this.qryBillList();
  },
  methods: {
    qryBill () {
      this.axios.post("/trade/pay/statis", {
        startTime: this.startTime,
        endTime: this.endTime
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.inPrice = result.data.inPrice;
          this.outPrice = result.data.outPrice;
        }
      })
    },
    qryBillList () {
      var endTime = new Date();
      var startTime = new Date();
      startTime.setFullYear(startTime.getFullYear() - 1);
      this.axios.post("/trade/pay/statisList", {
        startTime: startTime,
        endTime: endTime
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          var list = result.data;
          for (var i in list) {
            this.xdata.push(list[i].dateStr);
            this.ydata.push(list[i].price);
          }
          this.drawLine();
        }
      })
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '' },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.ydata,
          type: 'line'
        }]
      });
    }
  }
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/common/commonStyle.css";
@import "../../../assets/css/blstyle.css";
</style>
